<template>
  <div class="shopping_box">
      <div class="shop" v-for="item in phone">
        <router-link :to="'/shop_detail/'+'?id='+item.id">
        <div class="shop_left_box">
          <img :src="item.img" alt="">
        </div>
        <div class="shop_right_box">
          <p>{{item.title}}</p>
          <p>{{item.price}}</p>
        </div>
        </router-link>
      </div>
  </div>
</template>

<script>
  var json=require("../../data.json")
  export default {
    data () {
      return {
        phone:""
      }
    },
    created:function(){
        this.getmsg()
    },
    methods:{
        getmsg:function(){
          var phone=json.data.phone.wz
          this.phone=phone
        }
    }

  }
</script>

<style>
  .shopping_box{
    margin-bottom: 55px;
    width: 100%;
  }
  .shop{
    width: 100%;
    height: 90px;
    padding: 5px;
    margin-top: 5px;
    border-bottom: 1px solid #ccc;
  }
  .shop_left_box{
    width: 20%;
    height: 78px;
    /*background-color: yellow;*/
    float: left;
    padding: 5px;
  }
  .shop_left_box img{
    width: 100%;
    height: 100%;
    display: inline-block;
  }
  .shop_right_box{
    float: left;
    padding: 5px;
    width: 80%;
    height: 80px;
    /*background-color: palegoldenrod;*/

  }
  .shop_right_box p:first-child{
    font-size: 14px;
    color: black;
  }
  .shop_right_box p{
    text-align: left;
    height: 40px;
    width: 100%;
    line-height: 40px;
    color: #f23030;
    font-size: 20px;
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
</style>
